<template>
  <div class="order">
    <div class="order_info">
      <div class="ordername">
        <div class="order_img">
          <img src="../../static/images/organize_team/dd.png" />
        </div>
        <div class="order_title">
          <span>订单信息</span>
        </div>
      </div>
      <div class="ordername ti">
        <div class="bs">
          <span>订单号：</span>
        </div>
        <div class="as">
          <span>{{order_detail.order_num}}</span>
        </div>
      </div>
      <div class="ordername ti">
        <div class="bs">
          <span>类型：</span>
        </div>
        <div class="as">
          <span>{{order_detail.order_type}}</span>
        </div>
      </div>
      <div class="ordername ti">
        <div class="bs">
          <span>手机号：</span>
        </div>
        <div class="as">
          <span>*******</span>
        </div>
      </div>
      <div class="ordername ti">
        <div class="bs">
          <span>下单时间：</span>
        </div>
        <div class="as">
          <span>{{order_detail.create_order_date}}</span>
        </div>
      </div>
      <div class="ordername ti">
        <div class="bs">
          <span>用餐人数：</span>
        </div>
        <div class="as">
          <span>{{order_detail.people_num}} 人</span>
        </div>
      </div>
      <div class="ordername ti">
        <div class="bs">
          <span>总价：</span>
        </div>
        <div class="as">
          <span>￥{{order_detail.total_price}} 元</span>
        </div>
      </div>
    </div>
    <div class="order_info">
      <div class="ordername">
        <div class="order_ewm">
          <img src="../../static/images/organize_team/ewm.png" />
        </div>
        <div class="order_title">
          <span>消费二维码</span>
        </div>
      </div>
      <div class="xf">
        <img :src="order_detail.qr_code" />
      </div>
      <div class="ordername ti">
        <div class="bs">
          <span>商家名称：</span>
        </div>
        <div class="as">
          <span>{{order_detail.business_name}}</span>
        </div>
      </div>
      <div class="ordername ti">
        <div class="bs">
          <span>地址：</span>
        </div>
        <div class="as">
          <span>{{order_detail.address}}</span>
        </div>
      </div>
      <div class="ordername ti">
        <div class="bs">
          <span>手机号：</span>
        </div>
        <div class="as">
          <span>{{order_detail.business_phone}}</span>
        </div>
      </div>
      <div class="ordername ti">
        <div class="bs">
          <span>有效期：</span>
        </div>
        <div class="as">
          <span>永久有效(周末、法定节假日通用)</span>
        </div>
      </div>
      <div class="ordername ti">
        <div class="bs">
          <span></span>
        </div>
        <div class="as">
          <span></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Order",
  data() {
    return {
      order_detail: {
        order_num: "123456789",
        order_type: "AA",
        user_phone: "18790788900",
        create_order_date: "2019年12月1日",
        people_num: 5,
        total_price: 355,
        qr_code: require("@/static/images/organize_team/erw.png"),
        business_name: "小商家",
        address: "西安市",
        business_phone: "029-12345678",
        order_id: 1,
        order_status: "未消费",
        isInitiator:false //队长
      }
    };
  },

  mounted() {
    this.get_order_detail();
  },
  methods: {
    /*
     * 获取订单的详细信息
     * 作者：gzt
     * 时间：2019-12-01 22:11:29
     */
    get_order_detail() {
      let _this = this;
      this.$post(this.$api.organizeteam.get_order_detail,{
        orderId:this.$route.params.order_id
      }).then(res => {
        console.log(res)
        if (res.success) {
          if (res.data.order_status == "待支付") {
            this.$router.push({
              name: "payment",
              params: {
                order_id: _this.order_detail.order_id
              }
            });
          } else {
            _this.order_detail = { ...res.data };
          }
        }
      });
    }
  }
};
</script>
<style scoped>
.order {
  padding: 0.3rem;
}
.order_info {
  background: #ffffff;
  border-radius: 5px;
  padding: 0.2rem;
  text-align: left;
  margin-bottom: 0.3rem;
}
.ordername {
  display: flex;
  height: 0.5rem;
  align-items: center;
}
.order_img img {
  height: 0.4rem;
  padding-right: 0.1rem;
  display: flex;
  align-items: center;
}
.order_ewm img {
  height: 0.35rem;
  padding-right: 0.1rem;
  display: flex;
  align-items: center;
}
.order_title {
  font-size: 0.32rem;
  font-weight: bold;
}
.ti {
  padding-left: 0.4rem;
  color: #757575;
  font-size: 0.3rem;
  align-items: baseline;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  display: flex;
}
.bs {
  width: 1.8rem;
  align-items: baseline;
  text-align: right;
  padding-right: 0.25rem;
}
.as {
  color: #403f3f;
  flex: 1;
}
.xf {
  padding: 0.3rem;
  display: flex;
  justify-content: center;
}
</style>
